<template>
  <div class="ai-assistant">
    <!-- 顶部导航栏 -->
    <header class="assistant-header">
      <div class="logo">
        <img src="@/assets/logo1.png" alt="AI助手" />
        <span>AI 学习助手</span>
      </div>
    </header>

    <!-- 主体内容区域 -->
    <div class="main-content">
      <!-- 左侧历史记录面板 -->
      <div class="history-panel">
        <div class="history-header">
          <h3>历史记录</h3>
        </div>
        <div class="history-list">
          <div v-for="(record, index) in chatHistory" 
               :key="index" 
               class="history-item"
               :class="{ active: currentChatIndex === index }"
               @click="switchChat(index)">
            <div class="history-icon">
              <i class="icon-chat"></i>
            </div>
            <div class="history-content">
              <div class="history-title">{{ record.title || '新对话' }}</div>
              <div class="history-time">{{ record.time }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧对话区域 -->
      <div class="chat-section">
        <!-- 对话窗口 -->
        <div class="chat-container">
          <div class="chat-box">
            <!-- 系统消息 -->
            <div class="message system-message">
              <div class="message-content">
                你好，我是你的 AI 学习小助手！作为你的智能伙伴，我既能写文章、答疑解惑，还能陪你聊天。
              </div>
            </div>

            <!-- 聊天记录组件 -->
            <AIcomponents :chatList="formattedMessages" />
          </div>
        </div>

        <!-- 底部操作区 -->
        <div class="bottom-container">
          <!-- 示例按钮 -->
          <div class="message-buttons">
            <el-button v-for="(option, index) in exampleOptions" 
                      :key="index" 
                      @click="handleOptionClick(option)"
                      size="small">
              {{ option }}
            </el-button>
          </div>

          <!-- 输入区域 -->
          <div class="input-area">
            <div class="input-wrapper">
              <el-input
                v-model="userMessage"
                placeholder="说点什么..."
                :clearable="true"
                class="input-box"
                :disabled="false"
                @keyup.enter="sendMessage"
                type="text"
              />
              <el-button
                type="primary"
                :loading="isLoading"
                @click="sendMessage"
                class="submit-button"
              >
                提交
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import AIcomponents from './components/AIcomponents.vue';

const exampleOptions = [
  "查询图书评分",
  "推荐课程",
  "图书借阅评分"
];

const messages = ref([]);
const userMessage = ref('');
const chatHistory = ref([]);
const currentChatIndex = ref(-1);
const isLoading = ref(false);

// 预设的回答内容
const responseMap = {
  "我对人工智能感兴趣，可以推荐一些课程吗？": `当然可以！以下是一些适合不同学习阶段和背景的人工智能课程推荐：

1. 入门课程
Coursera: "AI For Everyone" by Andrew Ng
适合初学者，了解人工智能的基本概念和应用。
链接: AI For Everyone

edX: "Introduction to Artificial Intelligence (AI)" by IBM
介绍人工智能的基本概念、历史和应用。
链接: Introduction to AI

2. 中级课程
Coursera: "Machine Learning" by Andrew Ng
经典课程，涵盖机器学习的基本算法和技术。
链接: Machine Learning

Udacity: "Intro to Machine Learning with PyTorch"
使用PyTorch进行机器学习的实践课程。
链接: Intro to ML with PyTorch

3. 高级课程
Coursera: "Deep Learning Specialization" by Andrew Ng
深度学习专项课程，涵盖神经网络、卷积神经网络、序列模型等。
链接: Deep Learning Specialization

edX: "Artificial Intelligence (AI)" by Columbia University
高级课程，涵盖人工智能的数学基础和高级算法。
链接: Artificial Intelligence

4. 实践项目
Kaggle: "Micro-Courses"
提供短小精悍的实践课程，涵盖数据科学和机器学习的各个方面。
链接: Kaggle Micro-Courses

Fast.ai: "Practical Deep Learning for Coders"
专注于实践，适合有一定编程经验的学习者。
链接: Practical Deep Learning

5. 书籍推荐
"Artificial Intelligence: A Guide to Intelligent Systems" by Michael Negnevitsky
适合初学者，介绍人工智能的基本概念和应用。

"Deep Learning" by Ian Goodfellow, Yoshua Bengio, and Aaron Courville
深度学习领域的经典教材，适合高级学习者。

6. 其他资源
YouTube: "3Blue1Brown"
提供数学和机器学习的直观解释，适合理解复杂的数学概念。
链接: 3Blue1Brown

Google AI Blog
了解最新的人工智能研究和应用。
链接: Google AI Blog

希望这些资源能帮助你更好地学习和理解人工智能！如果你有任何具体的学习目标或问题，欢迎继续提问。`,
  
  "学计算机专业将来可以做什么工作？": `学习计算机专业为未来的职业发展提供了广泛的选择，几乎涵盖所有行业。以下是一些计算机专业毕业生可以从事的职业方向：

1. ​软件开发
​软件工程师：设计、开发和维护软件应用程序。
​全栈开发工程师：负责前端和后端的开发工作。
​移动应用开发工程师：开发iOS和Android应用程序。

2. ​数据科学和人工智能
​数据科学家：通过数据分析和机器学习技术解决复杂问题。
​机器学习工程师：开发和部署机器学习模型。
​人工智能研究员：研究人工智能算法和技术。

3. ​网络安全
​网络安全工程师：保护系统和网络免受攻击。
​信息安全分析师：分析和应对安全威胁。
​渗透测试员：通过模拟攻击测试系统的安全性。

4. ​云计算和DevOps
​云架构师：设计和实施云计算解决方案。
​DevOps工程师：负责开发和运维的自动化流程。
​系统管理员：管理和维护计算机系统和网络。

5. ​数据库管理
​数据库管理员：管理和优化数据库系统。
​数据工程师：设计、构建和维护数据处理系统。

6. ​游戏开发
​游戏程序员：开发游戏引擎和游戏逻辑。
​游戏设计师：设计游戏玩法和关卡。
​图形程序员：开发图形渲染技术。

7. ​嵌入式系统和物联网
​嵌入式系统工程师：开发嵌入式软件和硬件。
​物联网开发工程师：设计和实现物联网解决方案。

8. ​用户体验和界面设计
​UX/UI设计师：设计用户友好的界面和体验。
​前端开发工程师：实现网页和应用程序的前端设计。

9. ​技术咨询和项目管理
​技术顾问：为客户提供技术解决方案和建议。
​IT项目经理：管理和协调技术项目。
​产品经理：负责产品的规划、开发和发布。

10. ​学术和研究
​计算机科学研究员：在学术界或研究机构进行前沿研究。
​大学教授：教授计算机科学课程和指导研究。

11. ​创业
​技术创始人：创办科技公司，开发创新产品和服务。
​技术顾问：为初创公司提供技术支持和指导。

12. ​其他领域
​金融科技（FinTech）​：开发金融技术解决方案。
​健康信息技术（Health IT）​：开发医疗信息系统。
​教育技术（EdTech）​：开发教育软件和平台。

计算机专业的技能在各个行业都有广泛应用，选择职业时可以根据个人兴趣和职业目标进行选择。无论选择哪个方向，持续学习和更新技能都是成功的关键。希望这些信息能帮助你更好地规划未来的职业道路！`,
  
  "查询图书评分": "你可以在图书馆系统中搜索书名查看评分。",
  "推荐课程": "推荐你学习《人工智能基础》《Python编程与数据分析》《机器学习实战》。",
  "图书借阅评分": "图书信用评分基于借阅次数和归还情况计算得出。"
};

// 发送消息
const sendMessage = async () => {
  if (!userMessage.value.trim()) {
    ElMessage.warning("请输入内容！");
    return;
  }

  try {
    isLoading.value = true;
    const question = userMessage.value;
    messages.value.push(`用户: ${question}`);
    userMessage.value = '';

    // 模拟网络延迟
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // 获取预设回答或默认回答
    const answer = responseMap[question] || "抱歉，我暂时无法回答这个问题。";
    messages.value.push(`AI助手: ${answer}`);
    
    // 更新历史记录
    updateHistory(question);
  } catch (error) {
    console.error('发送消息失败:', error);
    ElMessage.error('发送失败，请重试');
  } finally {
    isLoading.value = false;
  }
};

// 处理示例选项点击
const handleOptionClick = (option) => {
  userMessage.value = option;
  sendMessage();
};

// 更新历史记录
const updateHistory = (message) => {
  const now = new Date();
  const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;

  chatHistory.value.unshift({
    title: message.substring(0, 20) + (message.length > 20 ? '...' : ''),
    time: time,
    messages: [...messages.value]
  });
  currentChatIndex.value = 0;
};

const switchChat = (index) => {
  currentChatIndex.value = index;
  messages.value = [...chatHistory.value[index].messages];
};

const formattedMessages = computed(() =>
  messages.value.map(msg => {
    const [role, ...textArr] = msg.split(': ');
    return {
      role: role.includes('AI') ? 'ai' : 'user',
      text: textArr.join(': ')
    };
  })
);
</script>

<style lang="less" scoped>
.ai-assistant {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f7fa;

  .assistant-header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;

      img {
        height: 40px;
        width: 40px;
      }

      span {
        font-size: 18px;
        font-weight: bold;
      }
    }
  }

  .main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    height: calc(100vh - 60px);

    .history-panel {
      width: 280px;
      min-width: 280px;
      background-color: #fff;
      border-right: 1px solid #e4e7ed;
      display: flex;
      flex-direction: column;
      height: 100%;

      .history-header {
        padding: 15px;
        border-bottom: 1px solid #e4e7ed;
        background-color: #f5f7fa;

        h3 {
          margin: 0;
          font-size: 16px;
          color: #303133;
          font-weight: 500;
        }
      }

      .history-list {
        flex: 1;
        overflow-y: auto;
        padding: 10px;

        .history-item {
          display: flex;
          align-items: center;
          padding: 12px;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.3s ease;
          margin-bottom: 8px;
          border: 1px solid transparent;

          &:hover {
            background-color: #f5f7fa;
            border-color: #e4e7ed;
          }

          &.active {
            background-color: #ecf5ff;
            border-color: #409eff;
          }

          .history-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #ecf5ff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            flex-shrink: 0;

            i {
              color: #409eff;
              font-size: 16px;
            }
          }

          .history-content {
            flex: 1;
            overflow: hidden;

            .history-title {
              font-size: 14px;
              color: #303133;
              margin-bottom: 4px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              line-height: 1.4;
            }

            .history-time {
              font-size: 12px;
              color: #909399;
            }
          }
        }
      }
    }

    .chat-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background-color: #fff;

      .chat-container {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        display: flex;
        flex-direction: column;

        .chat-box {
          width: 100%;
          max-width: 1000px;
          margin: 0 auto;

          .message {
            display: flex;
            margin-bottom: 10px;

            &.system-message {
              .message-content {
                background-color: #e5f0fe;
                border-radius: 8px;
                padding: 10px 15px;
                font-size: 14px;
                color: #333;
                max-width: 80%;
                text-align: left;
                margin-left: 0;
              }
            }
          }
        }
      }

      .bottom-container {
        background-color: #fff;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
        padding: 15px 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .message-buttons {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          margin-bottom: 15px;
          width: 100%;
          max-width: 1000px;
          justify-content: center;

          :deep(.el-button) {
            background: linear-gradient(135deg, #409eff, #66b1ff);
            color: #fff;
            border: none;
            border-radius: 20px;
            padding: 10px 20px;
            font-size: 14px;
            box-shadow: 0 2px 6px rgba(0, 123, 255, 0.2);
            transition: all 0.3s ease;

            &:hover {
              background: linear-gradient(135deg, #66b1ff, #409eff);
              box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
              transform: translateY(-2px);
            }

            &:focus {
              outline: none;
            }
          }
        }

        .input-area {
          width: 100%;
          max-width: 1000px;
          margin: 20px auto;
          padding: 0 20px;
          position: relative;
          z-index: 1;

          .input-wrapper {
            display: flex;
            gap: 12px;
            align-items: center;

            .input-box {
              flex: 1;
              :deep(.el-input__wrapper) {
                box-shadow: none;
              }
              :deep(.el-input__inner) {
                height: 45px;
                font-size: 15px;
                padding: 0 15px;
                border-radius: 6px;
                background-color: #fff;
                border: 1px solid #dcdfe6;
                cursor: text;
                user-select: text;
                -webkit-user-select: text;
                
                &:hover, &:focus {
                  border-color: #409eff;
                  outline: none;
                  box-shadow: none;
                }
              }
            }

            .submit-button {
              height: 45px;
              padding: 0 25px;
              font-size: 14px;
              border-radius: 6px;
              flex-shrink: 0;
              z-index: 1;
            }
          }
        }
      }
    }
  }
}
</style>
